<template>
  <div class="right-container">
    <div>
      <div class="login-title">{{ loginTitle }}</div>
      <el-form ref="formRef" :model="formData" :rules="rules">
        <el-form-item name="userName">
          <el-input class="a-form-item" v-model="formData.userName" />
        </el-form-item>
        <el-form-item name="password" class="i-password">
          <el-input
            class="a-form-item"
            type="password"
            v-model="formData.password"
          />
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        class="login-btn"
        :loading="loading"
        @click="clickLogin"
        >{{ loginBtnStr }}</el-button
      >
    </div>
    <!-- LoginRightComponent -->
  </div>
</template>
<script lang='ts'>
/**
 * 说明: 登录页面 登录表单
 * emit:
 *
 * 创建时间: 2021-02-24
 * 创建者: Q
 */
import { defineComponent, reactive, Ref, ref } from "vue";

export default defineComponent({
  name: "LoginRightComponent",
  setup() {
    const loginTitle: string = "登录";
    const loginBtnStr: string = "登录按钮";
    const loading: Ref<boolean> = ref(false);

    // const formRef = ref();
    const formData = reactive({
      userName: "",
      password: "",
    });
    const rule = {
      userName: {
        required: true,
        message: "用户名不能为空",
        trigger: "blur",
      },
    };
    function clickLogin() {
      console.log("啊啊啊啊", formData);
    }
    return { loginTitle, formData, clickLogin, rule, loginBtnStr, loading };
  },
});
</script>
<style lang='scss' scoped>
$width: 300px;
.right-container {
  padding-left: 10vw;
  display: flex;
  align-items: center;
  .login-title {
    font-size: 2rem;
    margin-bottom: 10px;
  }
  .i-password {
    margin-top: -14px;
  }

  .a-form-item {
    width: $width;
  }
  .login-btn {
    width: $width;
  }
}
</style>